<template>
    <div class="content" ref="wrap">
      <div>
        <div v-for="(item, index) of goods" :key="index">
          <div class="content__title" :ref="'title' + index">{{item.name}}</div>
          <ul>
            <li class="content__item border-bottom" v-for="(bar, index) of item.foods" :key="index">
              <div>
                <img class='item__img' :src="bar.image" alt="">
              </div>
              <div class="item__right">
                <div class="item__line">
                  <router-link :to="'/seller/goods'" tag="h4" class="item__title">{{bar.name}}</router-link>
                </div>
                <div class="item__line">
                  <div class="item__description">{{bar.description}}</div>
                </div>
                <div class="item__line">
                  <div class="item__sell">
                    <span>月售{{bar.sellCount}}份</span>
                    <span>好评率{{bar.rating}}%</span>
                  </div>
                </div>
                <div class="item__line">
                  <div class="priceInfo">
                    <span class="per">￥</span>
                    <span class="currentPrice">{{bar.price}}</span>
                    <span v-if="bar.oldPrice" class="lastPrice">￥{{bar.oldPrice}}</span>
                  </div>
                  <div>
                    <i class="iconfont icon-add"></i>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
</template>

<script>
import Bscroll from 'better-scroll'
export default {
  name: 'GoodsContent',
  props: {
    goods: Array
  },
  mounted () {
    this.$nextTick(() => {
      this.scroll = new Bscroll(this.$refs.wrap, {
        mouseWheel: true, click: true, tap: true
      })
    })
  },
  computed: {
    changeId () {
      return this.$store.state.goods.opened
    }
  },
  watch: {
    changeId () {
      let id = this.$store.state.goods.opened
      let ele = this.$refs['title' + id]
      this.scroll.scrollToElement(ele[0])
    }
  }
}
</script>

<style lang='scss' scoped>
  @import '~@/assets/style/common';
  .content {
    overflow: hidden;
    position: absolute;
    top: 348px;
    bottom: 96px;
    left: 162px;
    right: 0;
    background: #f3f5f7;
    .content__title {
      height: 52px;
      line-height: 52px;
      padding-left: 28px;
      border-left: 6px #d9dde1 solid;
      font-size: 24px;/*px*/
      color: rgb(147, 153, 159);
    }
    .content__item {
      display: flex;
      padding: 36px;
      background: #fff;
      &.border-bottom::before {
        color: rgba(7, 17, 27, .1)
      }
      .item__img {
        width: 116px;
        height: 116px;
        margin-right: 20px;
      }
      .item__right {
        overflow: hidden;
        flex: 1;
        .item__line {
          position: relative;
        }
        .item__title {
          padding-top: 4px;
          padding-bottom: 16px;
          font-size: 28px;/*px*/
          color: rgb(7, 17,27);
          @include omit;
        }
        .item__description {
          font-size: 18px;/*px*/
          padding-bottom: 16px;
          color: rgb(147, 153, 159)
        }
        .item__sell {
          font-size: 20px;/*px*/
          line-height: 20px;
          color: rgb(147, 153, 159)
        }
        .priceInfo {
          font-size: 0;
        }
        .per {
          font-size: 20px;
          color: rgb(240, 20, 20)
        }
        .currentPrice {
          margin-right: 16px;
          font-size: 28px;
          line-height: 48px;
          font-weight: 700;
          color: rgb(240, 20, 20)
        }
        .lastPrice {
          vertical-align: top;
          font-size: 20px;
          line-height: 48px;
          font-weight: 700;
          color: rgb(147, 153, 159);
          text-decoration: line-through;
        }
        .icon-add {
          position: absolute;
          right: 0;
          top: 0;
          bottom: 0;
          line-height: 48px;
          font-size: 36px;/*px*/
          color: #25a4bb;
        }
      }
    }
  }
</style>
